<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>header</title>
<link href="/resources/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="/resources/lib/jquery.min.js"></script>
<script src="/resources/lib/jquery-ui.js"></script>
<style type="text/css">
	html, body {
    	font-family: "Nanum Gothic", sans-serif;
    	width:100%;
    	height:100%;
    	font-size: 13px;
    	margin:0;
    	padding:0;
    	text-align:center;
	}
	a:LINK, a:VISITED{
		text-decoration:none;
	}
	a:HOVER{
		text-decoration: underline;
	}
	#header {
		width:100%;
		height:60px;
		padding: 0;
		text-align: left;
		margin: 0;
		background-color:#F1F1F1;
	}
</style>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
  WebFontConfig = {
    custom: {
        families: ['Nanum Gothic'],
        urls: ['http://fonts.googleapis.com/earlyaccess/nanumgothic.css']
    }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1.4.10/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
  
  // 검색 타입 값 설정
  function selectType(type){
	  document.getElementById('searchType').value = type;
  }
  
  // 검색
  function search(f){
	  if(f.searchType.value == "title" && f.searchValue.value == ""){
		  alert("검색어를 입력해 주세요");
		  return false;
	  }else{
		  alert(f.searchStartTime.value);
		  f.action = "/calendar/search.do";
		  f.submit();
	  }
  }
  
  $(document).ready(function() {
	  $("#dateWrap").hide();
	  
	  // 시작날짜
	  $("#searchStartTime").datepicker({
		  format: "yyyy-mm-dd",
		  onClose: function( selectedDate ) {
			  $("#searchEndTime").datepicker( "option", "minDate", selectedDate );
		  }
	  });
	  
	  // 끝날짜
	  $("#searchEndTime").datepicker({
		  format: "yyyy-mm-dd",
		  onClose: function( selectedDate ) {
			  $("#searchStartTime").datepicker( "option", "maxDate", selectedDate );
		  }
	  });

	  $("#typeTitle").click(function(){
		  $("#searchType").val("title");
		  $("#wrap").attr("class","col-lg-7");
		  $("#dateWrap").hide();
		  $("#searchValue").show();
	  });
	  
	  $("#typeDate").click(function(){
		  $("#searchType").val("date");
		  $("#wrap").attr("class","col-lg-8");
		  $("#searchValue").hide();
		  $("#dateWrap").show();
	  });
  });
</script>
</head>
<body>
<div id="header">
	<div style="padding-left:20px; width:200px; height:100%; display:inline; float:left; line-height:55px;"><a href="/calendar.do">청주시 통합 일정 시스템</a></div>
	<div style="width:40%; height:100%; display:inline; float:left; padding-top:12px;">
		<form id="f" name="f" class="form-inline" method="post">
			<div id="wrap" class="col-lg-7">
          		<div class="input-group">
           		<input type="text" class="form-control" id="searchValue" name="searchValue">
           		<div id="dateWrap" class="input-group">
	        		<input data-provide="datepicker" class="form-control" id="searchStartTime" name="searchStartTime" style="width:100px;">
	        		<span class="input-group-addon">-</span>
	        		<input data-provide="datepicker" class="form-control" id="searchEndTime" name="searchEndTime" style="width:100px;">
       			</div>
		            <div class="input-group-btn">
		            	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
			            &nbsp;<span class="caret"></span>
			            </button>
			            <ul class="dropdown-menu" role="menu">
			                <li id="typeTitle"><a href="#">제목</a></li>
			                <li id="typeDate"><a href="#">날짜</a></li>
			            </ul>
		            </div>
          		</div><!-- /.input-group -->
        	</div><!-- /.col-lg-6 -->
        
        <button type="button" class="btn btn-primary" onclick="search(f);" tabindex="-1">&nbsp;&nbsp;&nbsp;<span class="fa fa-search" style="font-size:11pt;"></span>&nbsp;&nbsp;&nbsp;</button>
		<input type="hidden" value="title" id="searchType" name="searchType">
		</form>
	</div>
	<div style="width:35%; height:100%; display:inline; float:left; text-align:right; line-height:55px;">
		<span class="fa fa-bar-chart-o" style="font-size:16pt;color:#C3C3C3;padding-right:13px;cursor:pointer;" onmouseover="this.style.color='#629FD6'" onmouseout="this.style.color='#C3C3C3'"></span>
		<span class="fa fa-globe" style="font-size:16pt;color:#C3C3C3;padding-right:13px;cursor:pointer;" onmouseover="this.style.color='#629FD6'" onmouseout="this.style.color='#C3C3C3'"></span>
		<c:if test="${!empty sessionScope.userDto.name}">
			<span class="fa fa-cog" style="font-size:16pt;color:#C3C3C3;cursor:pointer;padding-right:10px;" onmouseover="this.style.color='#629FD6'" onmouseout="this.style.color='#C3C3C3'" onclick="location.href='config.do'"></span>
			${sessionScope.userDto.name} <a href="/User/logout.do">로그아웃</a>
		</c:if>
	</div>
</div>
<p style="margin-bottom:60px;">
<div class="container">
    <div class="col-md-10">
        <div class='well'>
            <input type='text' class="form-control" id='datetimepicker6'/>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker6').datetimepicker();
            });
        </script>
    </div>
</div>
</body>
</html>